<template>
  <div>
    <input placeholder="输入关键字搜索" v-model.trim="info" />
    <!-- 内容 -->
    <MyPatient :list="renderList" @showInfo="showInfo"></MyPatient>
    <MyDetails v-show="flag" :obj="obj" @cloneInfo="cloneInfo"></MyDetails>
  </div>
</template>

<script>
import MyPatient from './components/MyPatient.vue';
import MyDetails from './components/MyDetails.vue';
export default {
  components: {
    MyPatient,
    MyDetails,
  },
  data() {
    return {
      list: [
        {
          id: '1',
          uname: '张三',
          ensue: '感冒',
          recipe: '感冒药',
          date: '2020-12-01',
        },
        {
          id: '2',
          uname: '李四',
          ensue: '头疼',
          recipe: '止疼药',
          date: '2020-12-02',
        },
        {
          id: '3',
          uname: '王二',
          ensue: '腰痛',
          recipe: '止痛贴',
          date: '2020-12-03',
        },
      ],
      info: '',
      flag: false,
      obj: {
        id: '1',
        uname: '张三',
        ensue: '感冒',
        recipe: '感冒药',
        date: '2020-12-01',
      },
    };
  },
  methods: {
    //显示弹窗
    showInfo(id) {
      this.obj = this.list.find((item) => item.id === id);
      this.flag = true;
    },
    //隐藏弹窗
    cloneInfo() {
      this.flag = false;
    },
  },
  computed: {
    renderList() {
      if (!this.info) {
        return this.list;
      } else {
        return this.list.filter((item) => {
          return (
            item.uname === this.info ||
            item.ensue === this.info ||
            item.recipe === this.info ||
            item.date === this.info
          );
        });
      }
    },
  },
};
</script>

<style scoped>
.my-table {
  border-collapse: collapse;
  width: 100%;
}

.my-table td,
.my-table th {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.my-table th {
  background-color: #f2f2f2;
}
</style>
